<template>
  <div class="main">
    <NavMenu></NavMenu>
    <!-- 一楼轮播图 -->
    <div class="of">
      <img
        src="https://adm.hzsp.com/uploads/20191116/859356644837751a99e6d6769471e2ad.jpg"
        alt=""
      />
      <img class="i" src="https://www.hzsp.com/images/repeat/bor1.png" alt="" />
    </div>

    <!-- 二楼演出 -->
    <div class="tf">
      <div class="center">
        <div class="yanchu" id="jcyc">
          <img src="https://www.hzsp.com/images/i1.png" alt="" />
          <p @click="goToAnchor('#jcyc')">精彩演出</p>
          <img src="https://www.hzsp.com/images/i2.png" alt="" />
          <p @click="goToAnchor('#qzly')">亲子乐园</p>
        </div>
        <div class="xhj">
          
          <div @click="skip(v.pid)"
            class="card"
            v-for="(v) in data"
            :key="v.pid"
 
          >
            <div class="img">
              <img :src="url+v.src" alt="" />
            </div>
            <div class="text">
              <p id="p">{{ v.title }}</p>
              <span class="t">{{ v.text }}</span>
              <span class="a"> {{ v.address }}</span>
            </div>
          </div>
        </div>

        <div class="yanchu" id="qzly">
          <img src="https://www.hzsp.com/images/i1.png" alt="" />
          <p class="er" @click="goToAnchor('#jcyc')">精彩演出</p>
          <img src="https://www.hzsp.com/images/i2.png" alt="" />
          <p class="lou" @click="goToAnchor('#qzly')">亲子乐园</p>
        </div>
        <div class="xhj">
          <div @click="skip2(v.pid)"
            class="card"
            v-for="v in data2"
            :key="v.pid">
            <div class="img">
              <img :src="url+v.src" alt="" />
            </div>
            <div class="text">
              <p id="p">{{ v.title }}</p>
              <span class="t">{{ v.text }}</span>
              <span class="a"> {{ v.address }}</span>
            </div>
          </div>
        </div>

        
      </div>
    </div>
    <div class="of">
      <img class="i" src="https://www.hzsp.com/images/repeat/bor2.png" alt="">
    </div>
    <!-- 绿色购票卡片 -->
      <Food></Food>
      <!-- 底部 -->
      <Bot></Bot>
  </div>
</template>

<script>
import NavMenu from '../components/NavMenu.vue'
import Bot from "@/components/index/Bot.vue";
import Food from "@/components/index/Food.vue";
export default {
   components: {NavMenu, Bot, Food},
   mounted(){
    this.axios.get('/v1/content/playQuery').then(res=>{
      console.log(res);
      this.data=res.data.data
    })
    this.axios.get('/v1/content/play2Query').then(res=>{
      console.log(res);
      this.data2=res.data.data
    })
   },
  data() {
    return {
      data:{},
      data2:{},
      // count:0,
      url:'http://176.19.26.136:3000/'
    };
  },
  methods: {
    skip2(pid,e){
      let id = this.data2[pid-1].pid
      this.$router.push(`/rizDetails/${id}`)
    },
    skip(pid,e) {
      let id = this.data[pid-1].pid
      this.$router.push(`/showDetails/${id}`)
      console.log(id);
      
    },
    goToAnchor(selector) {
      this.$el.querySelector(selector).scrollIntoView({
        behavior: "smooth", // 平滑过渡
        block: "start" // 上边框与视窗顶部平齐
      });
    },
  },
  
};
</script>
<style scoped src="../assets/css/itemlist.css"></style>

<style lang="scss">
.main{
  overflow-x: hidden;
}</style>
